<template>
	<view>
		<view  style="background: linear-gradient( 180deg, #FFEEEB 0%, #F8F8FA 100%);height: 310rpx;">
				<u-navbar title="88优惠" placeholder bg-color="transparent"  :auto-back="true">
				
			
				</u-navbar>
			
			</view>
			<view class=" u-flex-y-center u-flex-between" style="margin-top: -140rpx;padding-top: 26rpx;padding-left:40rpx">
				
				<view>
					<view class="u-flex-y-center" style="align-items: baseline;" @click="$u.route('/pages/member/score')">
						<view style="color: #FF8181;font-size: 88rpx;font-weight: bold;">{{user.score||0}}</view>
						<view class="u-f-32 u-bold u-m-l-10">积分 ></view>
					</view>
					<view class="u-f-24" style="color: #646464;margin-top: 15rpx;">累计消费积分</view>
					
				</view>
				<image src="/static/discount_bi.png" style="width: 440rpx;height: 297rpx;"></image>
			</view>
			<view class="u-p-30" style="padding-top: 0;">
				<view class="u-bg-fff u-flex-y-center u-flex-around" style="width: 690rpx;padding-top: 28rpx;padding-bottom: 28rpx;border-radius: 10%;">
					<view  class="u-flex-y-center" :class="status==0?'tabAct':'tab'" @click="clickTab(0)" >
					<view >最新</view>
					
					</view>
					<view  class="u-flex-y-center" :class="status==1||status==2?'tabAct':'tab'" @click="clickTab(1)" >
					<view >销量</view>
					<view class="u-flex u-m-l-6" style="flex-direction: column">
						<image :src="status==1?'../../static/uped.png':'../../static/up.png'" style="width: 13.84rpx;height: 9.4rpx;"></image>
						<image  :src="status==2?'../../static/downed.png':'../../static/down.png'" style="width: 13.84rpx;height: 9.4rpx;margin-top: 2rpx;"></image>
					</view>
					</view>
					<view  class="u-flex-y-center" :class="status==3||status==4?'tabAct':'tab'" @click="clickTab(3)" >
					<view >价格</view>
					<view class="u-flex u-m-l-6" style="flex-direction: column">
						<image :src="status==3?'../../static/uped.png':'../../static/up.png'" style="width: 13.84rpx;height: 9.4rpx;"></image>
						<image  :src="status==4?'../../static/downed.png':'../../static/down.png'" style="width: 13.84rpx;height: 9.4rpx;margin-top: 2rpx;"></image>
					</view>
					</view>
				</view>
			<u-gap height="20rpx"></u-gap>
			<view class="grid">
				<view  @click="$u.route('/pages/shop/scoreDetail?is_score=1&id='+item.id)" class="u-bg-fff u-r-20" v-for="(item,index) in list" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.06);border: 1rpx solid #F7F7F8;padding-bottom: 20rpx;">
					<image :src="item.image" style="width: 335rpx;height: 198rpx;"></image>
					<view class="u-m-t-14" style="padding: 0 16rpx;">
						<view class="u-f-28 u-bold">{{item.name}}</view>
						<view class="u-f-22 u-m-t-10" style="color: #646464;">原价：￥{{item.old_price}}</view>
						<view class="u-flex " style="color: #EA4D44;align-items: baseline;">
							<block v-if="item.score > 0">
								<view class="u-f-28 u-bold">{{item.score}}</view>
								<view class="u-f-22">积分</view>
								<view class="u-f-22">+</view>
							</block>
							
							<view class="u-f-28 u-bold">{{item.price}}</view>
							<view class="u-f-22">元</view>
						</view>
					</view>

				</view>
			</view>
			</view>
			<u-gap height="100rpx"></u-gap>
	</view>
</template>


<script>
	
	export default {
		
		data() {
			return {	
				user: {},
				
				list: [],
				page: 1,
				status:0,
				list1: [{
					name: '最新',
				}, {
					name: '销量',
				}, {
					name: '价格',
				}]
			}
		},
		onLoad() {
			this.getUser()
			this.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			clickTab(e){
				if(e==1){
					e = this.status==1?2:1
				}
				if(e==3){
					e = this.status==3?4:3
				}
								this.status = e
								this.list = []
								this.page = 1
								this.getList()
			},
			async getList() {
				if (this.page == -1) {
					return
				}
		
				let res = await uni.$u.http.post('shop/shopList', {
					page: this.page,
		sort: this.status,
		is_score:1
					});
				let ls = getApp().mergePage(res, this.page, this.list);
				this.list = ls.list
				this.page = ls.total
			},
			
			async getUser() {
				let res = await uni.$u.http.post('user/index');
				this.user = res
		
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: #F8F8FA;
	}
	.tab {
		font-size: 28rpx;
		color: #141936;
	}
	
	.tabAct {
		font-size: 28rpx;
		font-weight: 400;
		color: #EA4D44;
		position: relative;
	
		&:before {
			content: '';
			border-radius: 4rpx;
			width: 46rpx;
			height: 8rpx;
			bottom: -16rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #EA4D44;
			position: absolute;
		}
	}
	.grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
	}
</style>